<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			window.onload = function() {
				var canvas = document.getElementById("canvas")
				var cxt = canvas.getContext("2d")
				canvas.width = 550;
				canvas.height = 400;

				canvasx = canvas.getBoundingClientRect().left //返回canvas距离左边的距离
				canvasy = canvas.getBoundingClientRect().top //返回canvas距离上边的距离
				var startx;
				var starty;
				canvas.addEventListener("mousedown", downfun);

				function downfun(e) {
					startx = e.clientX - canvasx;
					starty = e.clientY - canvasy;
					console.log(startx + ', ' + starty)
				}
				
				var n = 0
				
				var settime = window.setInterval(function() {
					//创建img对象
					var img = new Image()
					img.src = "img/mario.png"

					//图片对象必须加载后才可以使用
					img.onload = function() {
						cxt.clearRect(0, 0, 300, 300)
						cxt.drawImage(img, 0 + 40*n, 0, 30, 30, 0, 0, 300, 300)
					}
					if(n >= 1) {
						n = 0;
					} else {
						n++;
					}
				}, 132)

			}
		</script>
	</body>

</html>